<template>
  <div class="calendar">
    <div class="title">
      <div class="des">
        <img :src="projectInfo.logo" alt="" />
        <div class="text">
          <p>{{ projectInfo.name }}</p>
          <span v-if="projectInfo.type === 1">瀑布式协作项目</span>
          <span v-else>软件敏捷开发项目</span>
        </div>
        <div class="level">lv{{ projectInfo.level }}</div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="control">
          <!-- 上一个月 -->
          <button class="prevm" @click="prevMonth(value)"></button>
          <el-date-picker
            v-model="value"
            align="right"
            type="date"
            placeholder="请输入日期"
            :picker-options="pickerOptions"
            :clearable="false"
          >
          </el-date-picker>
          <!-- 下一个月 -->
          <button class="nextm" @click="nextMonth(value)"></button>
        </div>
        <el-calendar v-model="value" id="calendar" style="height: 75px">
          <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
          <template slot="dateCell" slot-scope="{ data }">
            <p>
              <!--这里原本有动态绑定的class，去掉-->
              {{ data.day.split("-").slice(2).join("") }}
            </p>
            <span>{{ dealMyDate(data.day) }}</span>
          </template>
        </el-calendar>
      </div>
      <div class="right">
        <div class="h1">{{ transDate() }}</div>
        <div class="taskinday">
          <ul v-if="tableData.length > 0">
            <li v-for="item in tableData" :key="item.id">
              <div class="brief">
                <img :src="item.avatar" alt="" />
                <div class="info">
                  <p class="p1">{{ item.taskName }}</p>
                  <p class="p2" v-if="item.roleName">{{ item.roleName }}</p>
                  <p class="p2" v-else>&nbsp;</p>
                  <p class="p3">{{ item.name }}</p>
                </div>
                <div class="time">
                  <p class="waitingStart" v-if="item.status === 1">待开始</p>
                  <p class="state" v-if="item.status === 3">进行中</p>
                  <p class="competed" v-if="item.status === 4">已完成</p>
                  <p class="etime">
                    结束时间：{{
                      item.endDate
                        ? item.endDate.slice(0, 10)
                        : "未设置结束时间"
                    }}
                  </p>
                </div>
              </div>
            </li>
          </ul>
          <div v-else style="text-align: center">
            <span>暂无任务</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getcalendar, getcalendarday } from '@/api/project/calendar';
export default {
  name: 'calendar',
  data() {
    return {
      projectInfo: {},
      projectId: '',
      taskDate: [
        // { 'date': '2022-03-03', list: [{ name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }] },
        // {
        //   'date': '2022-03-15', list: [{ name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }]
        // },
        // { 'date': '2022-03-20', list: [{ name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }] },
        // { 'date': '2022-03-22', list: [{ name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }] },
        // { 'date': '2022-02-22', list: [{ name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }] },
        // { 'date': '2022-04-22', list: [{ name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }, { name: 'yulin', avatarsrc: '', taskname: '', endtime: '2022-3-30' }] }
      ],
      projectCalendarCountVoList: [],
      value: new Date(),
      month: '',
      year: '',
      day: '',
      tableData: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    };
  },
  created() {
    this.changeVal();
    this.projectId = Number(localStorage.getItem('projectId'));
    this.getCalendar();
    this.getProjectTaskList();
  },
  mounted() {
    // 获取当前年月日
    // this.year = Number(this.value.getFullYear());// 当前年份
    // this.month = Number(this.value.getMonth() + 1);// 当前月份
    // this.day = Number(this.value.getDate());// 具体哪一天
    // getcalendarday(Number(this.$route.params.projectId), month, year, day).then(res => {
    //   console.log('getcalendarday', res);
    // });
  },
  methods: {
    // 改变value的值
    changeVal() {
      // 获取当前年月日
      this.year = Number(this.value.getFullYear());// 当前年份
      this.month = Number(this.value.getMonth() + 1);// 当前月份
      this.day = Number(this.value.getDate());// 具体哪一天
    },
    // 获取项目日历
    async getCalendar() {
      const res = await getcalendar(this.projectId, this.month, this.year);
      console.log('日历', res);
      this.projectInfo = res.data;
      this.projectCalendarCountVoList = res.data.projectCalendarCountVoList;
    },
    // 获取项目日历任务列表
    async getProjectTaskList() {
      console.log(this.year, this.month, this.day);
      console.log(this.value);
      const res = await getcalendarday(this.projectId, this.month, this.year, this.day);
      console.log('列表', res);
      this.tableData = res.data;
      console.log(this.tableData);
    },
    // 动态渲染当前任务数量
    dealMyDate(val) {
      let res = '';
      this.projectCalendarCountVoList.filter(item => {
        if (item.date === val) {
          // console.log(item);
          res = item.taskNum + '项任务';
        }
      });
      return res;
    },
    nextMonth(value) {
      let year = this.value.getFullYear();// 当前年份
      let month = this.value.getMonth() + 1;// 当前月份
      let day = this.value.getDate();// 当前天数
      let nextyear = year;
      let nextmonth = parseInt(month) + 1;
      // 判断下一月是否会进入下一年
      if (nextmonth === 13) {
        nextyear = parseInt(year) + 1;
        nextmonth = 1;
      }
      // 计算下一年下一个月有多少天
      let nextday = new Date(nextyear, nextmonth, 0);
      let nextdays = nextday.getDate();
      if (day > nextdays) {
        day = nextdays;
        if (day < 10) {
          day = '0' + day;
        }
      }
      if (nextmonth < 10) {
        nextmonth = '0' + nextmonth;
      }
      let nexttime = nextyear + '-' + nextmonth + '-' + day;

      // 将得到的年月日格式转换为标准时间，与饿了么时间格式相同才能联动
      this.value = new Date(nexttime);
    },
    prevMonth(time) {
      let year = this.value.getFullYear();// 当前年份
      let month = this.value.getMonth() + 1;// 当前月份
      let day = this.value.getDate();// 当前天数
      let prevyear = year;
      let prevmonth = parseInt(month) - 1;
      // 判断上一月是否会进入上一年
      if (prevmonth === 0) {
        prevyear = parseInt(year) - 1;
        prevmonth = 12;
      }
      // 计算上一年上一个月有多少天
      let prevday = new Date(prevyear, prevmonth, 0);
      let prevdays = prevday.getDate();
      if (day > prevdays) {
        day = prevdays;
        if (day < 10) {
          day = '0' + day;
        }
      }
      if (prevmonth < 10) {
        prevmonth = '0' + prevmonth;
      }
      let prevtime = prevyear + '-' + prevmonth + '-' + day;

      // 将得到的年月日格式转换为标准时间，与饿了么时间格式相同才能联动
      this.value = new Date(prevtime);
    },
    // 右侧列表日期转换
    transDate() {
      var year = this.value.getFullYear();
      var month = this.value.getMonth() + 1;
      var date = this.value.getDate();
      if (date >= 1 && date <= 9) { // 日如果小于10就补个0
        date = '0' + date;
      }
      if (month >= 1 && month <= 9) { // 月如果小于10就补个0
        month = '0' + month;
      }
      return year + '年' + month + '月' + date + '日';
    }
  },
  watch: {
    value(newval, oldval) {
      // console.log('新值', newval);
      // console.log('旧值', oldval);
      if (newval !== oldval) {
        this.changeVal();
        this.getProjectTaskList();
        this.getCalendar();
        this.value = newval;
        console.log(this.value);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.calendar {
  width: 100%;
  height: 800px;
  background-color: #ffffff;
  box-shadow: 1px -2px 3px 0px rgba(153, 153, 153, 0.5),
    1px 2px 3px 0px rgba(153, 153, 153, 0.5);
  border-radius: 0 5px 5px 5px;
  margin-top: -4px;

  .title {
    width: 98%;
    height: 45px;
    margin: 0 auto;
    padding-top: 36px;
    margin-bottom: 38px;

    display: flex;
    justify-content: space-around;
    .des {
      width: 440px;
      height: 45px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      img {
        width: 45px;
        height: 45px;
      }
      .text {
        margin-left: 20px;
        p {
          margin: 0;
          font-size: 16px;
          font-weight: 400;
          color: #222222;
          line-height: 28px;
        }
        span {
          font-size: 14px;
          font-weight: 400;
          color: #555555;
          line-height: 20px;
        }
      }
      .level {
        align-self: flex-start;
        text-align: center;
        font-size: 12px;
        font-family: SukhumvitSet-Bold, SukhumvitSet;
        font-weight: bold;
        color: #ffffff;
        line-height: 22px;
        width: 59px;
        height: 22px;
        background: #e8f8ec;
        border-radius: 9px;
        margin-top: 5px;
        margin-left: 20px;
      }
    }
  }
  .content {
    width: 98%;
    height: 663px;
    margin: 0 auto;
    margin-top: 36px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 56%;
      position: relative;
    }
    .control {
      position: absolute;
      top: 15px;
      left: 35%;
      // background: #1160cf;
      .prevm {
        width: 36px;
        height: 36px;
        vertical-align: middle;
        background: url("~@/assets/toleft.png") no-repeat center center;
        background-size: 100% 100%;
        margin-right: 20px;
        cursor: pointer;
      }
      .nextm {
        width: 36px;
        height: 36px;
        vertical-align: middle;
        background: url("~@/assets/toright.png") no-repeat center center;
        background-size: 100% 100%;
        margin-left: 20px;
        cursor: pointer;
      }
      /deep/.el-date-editor {
        width: 160px;
        height: 40px;
        font-size: 18px;
        font-weight: 500;
        color: #0f0f0f;
      }
    }
    .right {
      width: 40%;
      height: 663px;
      background: #ffffff;
      box-shadow: 1px 1px 4px 0px rgba(186, 204, 247, 1);
      border-radius: 11px;
      .h1 {
        width: 100%;
        height: 65px;
        background: #f1f5ff;
        box-shadow: 0px 1px 2px 0px rgba(152, 152, 152, 0.5);
        border-radius: 11px 11px 0px 0px;
        font-size: 20px;
        font-weight: 500;
        color: #222222;
        line-height: 65px;
        text-align: center;
      }
      .taskinday {
        width: 94%;
        height: 553px;
        margin: 0 auto;
        margin-top: 23px;
        // overflow-x: hidden;
        overflow-y: scroll;
        padding-right: 10px;

        ul {
          width: 100%;
          height: 1px;
          background: #faf9ff;
          li {
            width: 100%;
            height: 96px;
            background: #faf9ff;
            margin-bottom: 10px;
            position: relative;
            .brief {
              width: 94%;
              height: 76px;
              position: absolute;
              left: 16px;
              top: 10px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              p {
                margin: 0;
              }
              img {
                width: 66px;
                height: 66px;
                border-radius: 50%;
                box-shadow: 1px 1px 3px #d7d7d7;
              }
              .info {
                flex: 1;
                height: 100%;
                margin-left: 10px;
                .p1 {
                  font-size: 18px;
                  font-weight: 500;
                  color: #222222;
                  line-height: 18px;
                  margin-bottom: 12px;
                }
                .p2 {
                  font-size: 14px;
                  font-weight: 400;
                  color: #555555;
                  line-height: 14px;
                  margin-bottom: 12px;
                }
                .p3 {
                  font-size: 16px;
                  font-weight: 400;
                  color: #222222;
                  line-height: 16px;
                }
                .p3::before {
                  content: "";
                  display: inline-block;
                  width: 7px;
                  height: 15px;
                  background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%);
                  border-radius: 3px;
                  vertical-align: bottom;
                  margin-right: 4px;
                }
              }
              .time {
                width: 210px;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-end;
                .state {
                  font-size: 14px;
                  font-weight: 400;
                  color: #ffd167;
                  line-height: 20px;
                }
                .waitingStart {
                  font-size: 14px;
                  font-weight: 400;
                  color: #555555;
                  line-height: 20px;
                }
                .competed {
                  font-size: 14px;
                  font-weight: 400;
                  color: #3ea528;
                  line-height: 20px;
                }
              }
              .state::before {
                content: "";
                display: inline-block;
                width: 11px;
                height: 11px;
                background: #ffd167;
                margin-right: 3px;
                box-shadow: 0 0 3px #ffd167;
                border-radius: 50%;
                margin-right: 4px;
              }
              .waitingStart::before {
                content: "";
                display: inline-block;
                width: 11px;
                height: 11px;
                background: #555555;
                margin-right: 3px;
                box-shadow: 0 0 3px #555555;
                border-radius: 50%;
                margin-right: 4px;
              }
              .competed::before {
                content: "";
                display: inline-block;
                width: 11px;
                height: 11px;
                background: #3ea528;
                margin-right: 3px;
                box-shadow: 0 0 3px #3ea528;
                border-radius: 50%;
                margin-right: 4px;
              }
              .etime {
                font-size: 14px;
                font-weight: 400;
                color: #555555;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
  }
}
// .el-calendar-table .el-calendar-day{
//   height: 75px;
// }
/deep/.el-calendar {
  height: 100%;
  box-shadow: 1px 1px 4px 0px rgba(186, 204, 247, 1);
  border-radius: 10px;
  thead {
    th {
      width: 166px;
      height: 54px;
      padding: 0;
      background-color: #ffffff;
      font-size: 16px;
      color: #222222;
      border-right: 1px solid #f1f4ff;
      // border-bottom: 1px solid #f1f4ff;
    }
  }
}
/deep/ .el-calendar-table .el-calendar-day {
  height: 75px;
}
/deep/.el-calendar thead th:first-child {
  border-left: 1px solid #f1f4ff;
}
// /deep/.el-calendar-table {
//   width: ;
// }
/deep/.el-calendar-table thead th:before {
  content: "星期";
}
/deep/ .el-calendar__header {
  // 修改头部背景颜色
  height: 68px;
  // background: #ffffff;
  background: #f1f5ff;
  border: 1px solid #f1f4ff;
  border-radius: 10px 10px 0 0;
  padding: 0;
  text-align: center;
  justify-content: center;
}

/deep/.el-calendar-table td {
  border: 1px solid #f1f4ff;
}
/deep/.el-calendar__body {
  // 修改主题部分
  padding: 0 !important;
  // p {
  //   margin: 0;
  //   text-align: right;
  //   font-size: 22px;
  //   font-family: DINAlternate-Bold, DINAlternate;
  //   font-weight: bold;
  //   color: #555555;
  // }
  // span {
  //   font-size: 16px;
  //   font-family: PingFangSC-Regular, PingFang SC;
  //   font-weight: 400;
  //   color: #555555;
  //   line-height: 22px;
  //   text-align: right;
  // }
}
/deep/.current p {
  margin: 0;
  text-align: right;
  font-size: 22px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #555555;
}
/deep/.current span {
  display: block;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #555555;
  // color: #2FC0E0;
  line-height: 22px;
  text-align: center;
}
/deep/.prev p {
  margin: 0;
  text-align: right;
  font-size: 22px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;

  color: #eaeaea;
}
/deep/.prev span {
  display: block;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

  color: #eaeaea;
  line-height: 22px;
  text-align: center;
}
/deep/.next p {
  margin: 0;
  text-align: right;
  font-size: 22px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;

  color: #eaeaea;
}
/deep/.next span {
  display: block;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;

  color: #eaeaea;
  line-height: 22px;
  text-align: center;
}
// 取消日历选中背景
/deep/.el-calendar-table td.is-selected {
  background: #e8f8fb;
}
/deep/.el-calendar-table {
  width: auto;
}
// 日历单元格鼠标经过背景色
/deep/.el-calendar-table .el-calendar-day:hover {
  background: #e8f8fb;
}
// 隐藏初始日历切换按钮
/deep/ .el-calendar__button-group {
  display: none;
}

// 修改滚动条样式
::-webkit-scrollbar {
  width: 10px; /*高宽分别对应横竖滚动条的尺寸 */
  max-height: 5px;
}

/* 滚动槽的轨道 */
::-webkit-scrollbar-track {
  border-radius: 30px;
}
.is-selected {
  .el-calendar-day {
    span {
      // 选中日期颜色
      // color: red;
      color: #2fc0e0;
    }
  }
}

/* 滚动条的小滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #2fc0e0;
  // background: linear-gradient(180deg, #1160cf 0%, #cd06bf 100%);
}
</style>
